<template>
  <div id="SystemManage">
    <div class="system-manage-header">
      <div class="system-manage-header-title">
        博汇科技超高清体验评测系统-系统管理
      </div>
      <div class="system-manage-header-back" @click="goToHome">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回主页</span>
      </div>
    </div>

    <div class="system-manage-container">
      <div class="system-manage-menu">
        <el-menu mode="vertical" :default-active="activeMenu">
          <el-menu-item
            index="UserManage"
            @click="handleMenuClick('UserManage')"
          >
            用户管理
          </el-menu-item>
          <el-menu-item
            index="RoleManage"
            @click="handleMenuClick('RoleManage')"
          >
            角色管理
          </el-menu-item>
        </el-menu>
      </div>
      <div class="child-system-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();

// 获取当前路由
const activeMenu = ref("UserManage");
const currentRoute = route.name;
if (currentRoute === "UserManage") {
  activeMenu.value = "UserManage";
} else if (currentRoute === "RoleManage") {
  activeMenu.value = "RoleManage";
}

// 菜单点击
function handleMenuClick(menuName: string) {
  activeMenu.value = menuName;
  router.push({
    name: menuName,
  });
}

// 返回主页
function goToHome() {
  router.push("/");
}
</script>

<style scoped lang="scss">
#SystemManage {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/bg.png") no-repeat center top;
  background-size: 100% 100%;
}

.system-manage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.4rem;
  padding-left: 3rem;
  padding-right: 3rem;
  .system-manage-header-title {
    font-family: "douyinbold";
    font-size: $font-size-system-Logo;
    color: $text-color-brand;
  }
  .system-manage-header-back {
    display: flex;
    align-items: center;
    cursor: pointer;
    span {
      font-size: $font-size-block-title;
      color: $text-color-regular;
    }
    .el-icon {
      font-size: $font-size-block-title;
      color: $text-color-regular;
    }
    &:hover {
      span {
        color: $text-color-brand;
      }
      .el-icon {
        color: $text-color-brand;
      }
    }
  }
}
.system-manage-container {
  display: flex;
  height: calc(100% - 8.4rem);
  padding: 0 2rem 2rem 2rem;
}
.system-manage-menu {
  height: 100%;
  width: 20rem;
  margin-right: 2rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  .el-menu {
    border-right: none;
  }
  .el-menu-item {
    margin-bottom: 1rem;
    font-size: $font-size-page-menu;
    color: $text-color-regular;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-menu-item.is-active {
    background: url("~@/assets/images/menu-active.png") no-repeat center
      top/100% 100%;
    color: #fff;
  }
}
.child-system-content {
  flex: 1;
  height: 100%;
  background-color: #fff;
}
</style>
